<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../../dist/avalon.js"></script>
        <script>
            avalon.component('ms-button', {
                template: '<button type="button"><span><slot /></span></button>',
                defaults: {
                    buttonText: "button",
                    onReady: function () {
                        avalon.log('ready!!')
                        ++index
                    },
                    onInit: function () {
                        avalon.log('init!!')
                        ++index
                    },
                    onViewChange: function () {
                        avalon.log('viewchange!!')
                        ++index
                    },
                    onDispose: function (e) {
                        avalon.log('dispose!!')
                        ++index
                    }
                },
                soleSlot: 'buttonText'
            })
            var index = 0
            var vm = avalon.define({
                $id: 'test',
                click: function () {
                    vm.config.buttonText = new Date - 0
                },
                config: {
                    buttonText: '按钮',
                    onInit: function (e) {
                        avalon.log('init')
                        ++index
                    },
                    onReady: function (e) {
                        avalon.log('ready')
                        ++index
                    },
                    onViewChange: function (e) {
                        avalon.log('viewchange')
                        ++index
                    },
                    onDispose: function (e) {
                        avalon.log('dispose')
                        ++index
                    }
                }
            })
            function expect(a) {
                return {
                    to: {
                        equal: function (b) {
                            console.log(a, b, a === b)
                        }
                    }
                }
            }
            setTimeout(function () {
                expect(index).to.equal(4)
                vm.click()
                setTimeout(function () {
                    expect(index).to.equal(6)
                    document.getElementById('aaa').innerHTML = ''
                    setTimeout(function () {
                        expect(index).to.equal(8)
                    }, 500)
                }, 500)
            }, 500)

        </script>
    </head>
    <body>
        <h2>组件内部定义生命周期钩子</h2>
        <div ms-controller='test' id="aaa" >
            <div><wbr ms-widget="[{is:'ms-button'},@config]"/></div>
            <button ms-click="@click" type="button">change</button>
        </div>


    </body>
</html>
